<template>
    <div class="h-full w-full">
        <div id="falxtarget" class="w-full h-full"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onBeforeUnmount, onMounted, watch } from 'vue';
import type { FaAnLeiXing } from "@/apis/homeApi";

const props = defineProps({
    data: {
        type: Object as () => FaAnLeiXing,
        require: true,
    }
})

//初始化ecahrts实例
let myChart: echarts.ECharts
function resz() {
    myChart.resize();
}

onBeforeUnmount(() => {
    window.removeEventListener('resize', resz);
})

onMounted(() => {
    myChart = echarts.init(document.getElementById('falxtarget') as HTMLDivElement)
    renderChart()
    window.addEventListener('resize', resz);
})

//构建option配置对象
const renderChart = () => {
    const option = {
        title: {
            text: '发案类型占比',
            // subtext: ,
            left: 'center',
            textStyle: {
                color: '#fff'
            },
            subtextStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left',
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        //图标的位置
        grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            containLabel: true,
        },
        //核心配置
        series: [
            {
                data: props.data!.leiXingZhanBi,
                type: 'pie',
                //字体
                label: {
                    show: true,
                    //position: 'top',
                    color: '#fff',
                    formatter: '{b}: {c} ({d}%)',
                    overflow: 'truncate',
                    position: 'outer',
                    alignTo: 'none',
                    edgeDistance: '25%',
                    bleedMargin: 10,
                    distanceToLabelLine: 5,
                },
                labelLine: {
                    show: true,
                    length: 15,
                    length2: 15,
                    smooth: false,
                    minTurnAngle: 90,
                    maxSurfaceAngle: 90,
                    lineStyle:{
                        width: 1,
                        type: 'solid',
                    }
                },
                name: '发案类型',
                radius: '50%',
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }

        ]
    }
    //3.通过实例填充图标

    myChart.setOption(option)

}
//检测来自父组件的数据变化更新图标
watch(() => props.data, () => {
    myChart.clear()
    renderChart()
})


</script>

<style scoped></style>